<template>
  <div>
    <!-- 基本信息 -->
    <div>
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="3"
        formType="show"
        labelWidth="90"
        :isSubmitBtn="false"
      />
    </div>
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :columns="columns"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls" v-if="type=='edit'">
        <el-button type="primary" @click="addReceiption">新增</el-button>
      </template>
    </FilterTable>
		<div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">返 回</el-button>
    </div>
    <BaseDialog
      :visible.sync="visible"
      title="新增收款"
      width="70%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <AddReceiption :rowData="formData" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>

<script>
import { getPubPayobjMore, getPubPayItemByPubPayId } from '@/api/capitalsettle/vehicle/settlecollection';
import { dictionary } from '@/utils/dictMixin';
import { notifyAction } from '@/utils';
import moment from 'moment'
import AddReceiption from './addReceiption'
import { stringify } from 'querystring';

export default {
  name: "Receiptdetail",
  mixins: [dictionary],
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'edit'
    }
  },
  components: {
    AddReceiption
  },
  data() {
    return {
      formList: this.createFormList(), //上方明细数据
      fetchApi: getPubPayItemByPubPayId,
      fetchParams: {},
      columns: this.createTableColumns(), //table数据
      formData: this.rowData,
      visible: false
    }
  },
  created () {
    let { rowData } = this
    this.fetchParams['pubPayId'] = rowData.pubPayId
  },
  mounted () {
    this.init();
  },
  methods: {
    init (){
      let { rowData } = this
      console.log(rowData)
      /* this.formList.forEach(item => {
        item.initialValue = rowData[item.fieldName];
      }) */
      let params = {
        pubPayId: rowData.pubPayId
      }
      getPubPayobjMore(params).then( res => {
        this.preParams = res.data;
        if(res.success){
          this.formList.forEach(item => {
            item.initialValue = res.data[item.fieldName];
          })
        }
      })
    },
    createFormList() { //上方明细数据
      return [
        {
          type: 'INPUT',
          label: '销售订单号',
          fieldName: 'balanceNo',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'name',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '手机号码',
          fieldName: 'phone',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '车辆价格',
          fieldName: 'vehiclePrice',
          placeholder: '',
        },
        // {
        //   type: 'INPUT',
        //   label: '赠送金额',
        //   fieldName: '',
        //   placeholder: '',
        // },
        // {
        //   type: 'INPUT',
        //   label: '抵扣金额',
        //   fieldName: '',
        //   placeholder: '',
        // },
        {
          type: 'INPUT',
          label: '装潢合计金额',
          fieldName: 'renovation',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '保险合计金额',
          fieldName: 'insurance',
          placeholder: '',
        },
        // {
        //   type: 'INPUT',
        //   label: '代办合计金额',
        //   fieldName: '',
        //   placeholder: '',
        // },
        {
          type: 'INPUT',
          label: '订单总额',
          fieldName: 'allAmount',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '订单应收',
          fieldName: 'receivableAmount',
          placeholder: '',
        },
        // {
        //   type: 'INPUT',
        //   label: '发票金额',
        //   fieldName: '',
        //   placeholder: '',
        // },
        {
          type: 'INPUT',
          label: '订单已收',
          fieldName: 'receiveAmount',
          placeholder: '',
        },
        // {
        //   type: 'INPUT',
        //   label: '减免金额',
        //   fieldName: '',
        //   placeholder: '',
        // },
        // {
        //   type: 'INPUT',
        //   label: '增值业务已收',
        //   fieldName: '',
        //   placeholder: '',
        // },
        {
          type: 'INPUT',
          label: '欠款总额',
          fieldName: 'arearAmount',
          placeholder: '',
        },
        {
          type: 'CHECKBOX',
          label: '是否结清',
          fieldName: 'payOff',
          placeholder: '',
          options: { trueValue: 10041001, falseValue: 10041002 }
        },
      ];
    },
    createTableColumns () {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '销售订单号',
          dataIndex: 'balanceNo',
        },
        {
          title: '收款单号',
          dataIndex: 'pubPayNo',
          width: 160,
        },
        {
          title: '收款金额',
          dataIndex: 'receiveAmount',
          // filterItems: this.createDictList('1421'),
          // render: props => {
          //   return <span> { this.preDictHandler(props.row.serviceType,'1421')} </span>
          // }
        },
        {
          title: '收款方式',
          dataIndex: 'payTypeCode',
          filterType: 'checkbox',
          filterItems: this.createDictList('8044'),
          render: props => {
            return <span>{this.createDictText(props.row.payTypeCode, '8044')}</span>;
          }
        },
        /* {
          title: '收款类型',
          dataIndex: 'gatheringType',
          filterType: 'checkbox',
          filterItems: this.createDictList('1425'),
          render: props => {
            return <span>{this.createDictText(props.row.gatheringType, '1425')}</span>;
          }
        }, */
        {
          title: '票据号码',
          dataIndex: 'billNo',
        },
        {
          title: '是否销账',
          dataIndex: 'writeoffTag',
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.writeoffTag, '1004')}</span>;
          }
        },
        {
          title: '销账日期',
          dataIndex: 'writeoffDate',
        },
        {
          title: '销账人',
          dataIndex: 'writeoff',
        },
        {
          title: '收款日期',
          dataIndex: 'receiveDate',
        },
        {
          title: '经办人',
          dataIndex: 'handler',
        },
        {
          title: '备注',
          dataIndex: 'remark',
        },
      ]
    },
    addReceiption () {
      this.visible = true
    },
    closeDialog () {
      this.$emit('close', false)
    },
    closeHandler (val) {
      this.visible = false
      if (val == 'refresh') {
        this.init()
        this.fetchParams = Object.assign({},this.fetchParams)
      }
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
  }
}
</script>

<style lang="less" scoped>
</style>
